/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view style="margin-bottom: 60upx;">
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class='back-img' @click="back">
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
		</view>
		<view class="type-list">
			<view :class="typeIndex==index?'type-item-ac':'type-item'" @click="typeIndex=index" v-for="(item,index) in typeData" :key='index'>{{item.type}}</view>
		</view>
		<Comment :isShowzan='true' :itemHandle='toDetail' :showReply='false' :showReplyNum='false' :showTP='true' :showTime='false' :foodComment='true'></Comment>
	</view>
</template>

<script>
	import Comment from '@/components/Comment.vue'
	export default{
		data(){
			return{
				isShowzan:true,
				typeIndex:0,
				statusBarHeight:global.statusBarHeight + 'px',
				typeData:[
					{
						type:'全部',
						id:0
					},
					{
						type:'最新',
						id:1
					},
					{
						type:'有图',
						id:2
					},
					{
						type:'做工精美',
						id:3
					}
				]
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'evaluationDetail'
				})
			}
		},
		created(){
			
		},
		components: {
			Comment
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		min-height: 40upx;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 750upx;
		height: 100upx;
		background: #FFFFFF;
	}
	.back-img{
		width: 50upx;
		height: 50upx;
		float: left;
		text-align: center;
		vertical-align: middle;
	}
	.back-img image{
		width: 24px;
		height: 24px;
		margin-left: 20upx;
	}
	.type-list{
		width: 700upx;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		margin-top: 40upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.type-item{
		width: auto;
		display: block;
		height: 30upx;
		line-height: 30upx;
		padding: 4upx 20upx;
		border: #999999 solid 1upx;
		border-radius: 30upx;
		text-align: center;
		color: #999999;
		margin-right: 20upx;
		font-size: 24upx;
	}
	.type-item-ac{
		width: auto;
		display: block;
		height: 30upx;
		line-height: 30upx;
		padding: 4upx 20upx;
		border: #559EFF solid 1upx;
		border-radius: 30upx;
		color: #559EFF;
		text-align: center;
		margin-right: 20upx;
		font-size: 24upx;
	}
</style>
